<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购买书籍案例</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				width: 400px;
				height: 400px;
				margin: 0 auto;
				background-color: #BEBEBE;
				border: #BEBEBE 2px solid;
			}
			#app th{
				border: saddlebrown 2px solid;
				
			}
			#buy{
				width: 100px;
				height: 50px;
				margin-left:150px;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app" >
			<table cellpadding="4"  >
				<tr>
					<th>序号</th>
					<th>书籍名称</th>
					<th>购买数量</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
				<tr v-for="(item,index) in books">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					
					<td>
						<button type="button" id="increment" @click="increment(index)"  v-bind:disabled="item.counter <= 1">-</button>
						{{item.counter}}
						<button type="button" id="decrement" @click="decrement(index)">+</button>
					</td>
					
					<td >{{getPrince(item.price)}}</td>
					<td><button type="button" @click="remove(index)">移除</button></td>	
				</tr>
			</table>
			<h2>总价:{{getPrince(getSum())}}</h2>
			<button type="button" id="buy" @click="pay()">支付</button>
			<h2 id="h2"></h2>
		</div>
		<script type="text/javascript">
		var x =10; 
			var spp = new Vue({
				el:'#app',
				data:{
					books:[
						{
							id:1,
							name:'红楼梦',
							counter:1,
							price:65.00
						},
						{
							id:2,
							name:'西游记',
							counter:1,
							price:55.00
						},
						{
							id:3,
							name:'三国演义',
							counter:1,
							price:105.00
						},
						{
							id:4,
							name:'聊斋',
							counter:1,
							price:99.00
						}
					],
					
					
				},
				methods:{
					increment(index){
						this.books[index].counter--;
					},
					decrement(index){
						this.books[index].counter++;
					},
					getPrince(price){
						return '￥'+price.toFixed(2);//保留两位小数
					},
					getSum(){//计算总价格
						var sum = 0 ;
						for(var i = 0 ; i < this.books.length ;i++){
							sum += this.books[i].price*this.books[i].counter;
						}
						return sum ;
					},
					remove(index){//删除
						this.books.splice(index,1);
					},
					pay(){
						var h2 = document.getElementById('h2');
						setInterval(function(){
							h2.innerHTML = this.x--+'秒后自动支付';
							if(this.x <= -1){
								h2.innerHTML ='支付成功';
							} 
							
						},1000);
						
					}
				}
			});
		</script>
	</body>
</html>
